<template>
  <div>
    <el-table border style="width: 100%" :data="relations">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="idno" label="身份证" />
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.gender" :value="scope.row.gender" />
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="出生日期" />
      <el-table-column prop="whcd" label="文化程度">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.whcd" :value="scope.row.whcd" />
        </template>
      </el-table-column>
      <el-table-column prop="jtdz" label="家庭地址" />
      <el-table-column prop="dwyzy" label="单位与职业" />
      <el-table-column prop="xhgx" label="相互关系" />
      <el-table-column prop="lxdh" label="联系电话" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['user:sjsk:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
          <el-button
            v-hasPermi="['user:sjsk:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0; text-align: center">
      <el-button
        type="primary"
        size="mini"
        @click="openRelationModal"
      >新增成员</el-button>
    </div>
    <RelationModal ref="relationModalRef" @data-updated="loadRelations" />
  </div>
</template>
<script>
import RelationModal from './relationModal.vue'
import { getRelationByUserId, delRelation } from '@/api/user/relation'
export default {
  dicts: ['whcd', 'gender'],
  components: {
    RelationModal
  },
  props: {
    typeId: {
      type: String
    }
  },
  data() {
    return {
      relations: []
    }
  },
  watch: {
    typeId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          this.relations = []
          this.loadRelations()
        }
      }
    }
  },
  methods: {
    loadRelations() {
      getRelationByUserId(this.typeId).then((res) => {
        this.relations = res.data
      })
    },
    openRelationModal() {
      this.$refs['relationModalRef'].openModal(this.typeId)
    },
    handleUpdate(row) {
      this.$refs['relationModalRef'].openModal(this.typeId, row.relationId)
    },
    handleDelete(row) {
      const relationIds = row.relationId
      this.$modal
        .confirm('是否确认删除社会关系编号为"' + relationIds + '"的数据项？')
        .then(() => {
          return delRelation(relationIds)
        })
        .then(() => {
          this.loadRelations()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
        .finally(() => {})
    }
  }
}
</script>
